<template>
	<view class="px-3">
		<view class="content w-max-100">
			<view class="w-max-100 item-car mb-3" v-for="(item,index) in bankList" :key="index">
				<view class="up-car p-3">
					<view class="flex align-center">
						<text class="mr-4">{{item.name}}</text>
						<text>{{item.bank}}</text>
					</view>
					<view class="mt-2">{{item.card_num}}</view>
				</view>
				<view class="btm-car flex justify-between">
					<view>
						<label class="radio flex align-center" @click="setCarDefault(item.id)">
							<radio style="zoom: .8;" color="#75BE0D" disabled :checked="item.is_default != 0" /><text class="ml-1">设为默认</text>
						</label>
					</view>
					<view class="flex align-center" @click="delCar(item.id)">
						<image style="width: 21rpx;height: 23rpx;" src="../../static/images/clear.png" mode=""></image>
						<text class="ml-1">删除</text>
					</view>
				</view>
			</view>
		</view>
		<view class="add-btn mt-5" @click="addCar">添加银行卡</view>
	</view>
</template>

<script>
	import { postCardList, postCardDetault, postDelCard } from "../../api/user.js";
	export default {
		data() {
			return {
				bankList: [], // 银行卡列表
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			// 银行卡列表
			init(){
				this.getBankList();
			},
			async getBankList() {
				var data = {}
				data.token = uni.getStorageSync('token');
				var res = await postCardList(data);
				if(res.data.code == 1) {
					this.bankList = res.data.data;
				}
			},
			
			// 修改默认银行卡
			async setCarDefault(id){
				var data = new Object();
				data.id = id;
				data.token = uni.getStorageSync('token');
				var res = await postCardDetault(data);
				if(res.data.code == 1) {
					this.getBankList()
				}
			},
			
			//删除银行卡
			async delCar(id) {
				var data = new Object();
				data.id = id;
				data.token = uni.getStorageSync('token');
				var res = await postDelCard(data);
				if(res.data.code == 1) {
					this.getBankList()
				}
			},
			
			// 添加银行卡
			addCar() {
				uni.navigateTo({
					url: "/pages/user/add-bank"
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}
	.w-max-100 {
		width: 100%;
	}
	
	.add-btn {
		width: 100%;
		height: 90rpx;
		background-color: #75BE0D;
		font-size: 32rpx;
		text-align: center;
		line-height: 90rpx;
		color: #FFFFFF;
		border-radius: 45rpx;
	}
	
	.item-car {
		border-radius: 15rpx;
		overflow: hidden;
	}
	.up-car {
		background-color: #75BE0D;
		font-size: 28rpx;
		line-height: 35rpx;
		color: #FFFFFF;
	}
	.btm-car {
		padding: 26rpx;
		background-color: #F6F6F6;
		font-size: 24rpx;
	}
</style>
